<template>
    <div style="min-width: 100%;overflow: auto" :style="{height:screenOrWh.px2vh(500)}" class="scorll-hidden-scr">
        <div style="min-width: 100%;height: 100%;overflow: auto" class="scorll-hidden-scr">
            <div class="quyucengji-line-base" :style="{minHeight:screenOrWh.px2vh(500)}"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {firChatSizeVw,firChatSizeVh} from '@/utils/echartsFont'
import screenOrWh from "@/utils/screenOrWh";
import instance from "@/api";
let mendianshuliangEcharts = null
export default {
    name: "cengjiquyupaiming",
    data(){
        return {
            screenOrWh:screenOrWh,
            optionTiaoXing:{
                title: {
                    text: '区域层级排名统计',
                    textStyle:{
                        color:'#fff',
                        fontWeight:650,
                        fontSize:firChatSizeVw(30),
                    },
                    left:0,
                    top:0,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox:{
                    show:true,
                    feature: {
                        // saveAsImage: {},  // 导出图片
                        magicType: {show: true, type: ['line', 'bar']},
                    }
                },
                grid: {
                    top: firChatSizeVw(80) + 'vh',
                    left: firChatSizeVw(0),
                    right: firChatSizeVw(0),
                    bottom: firChatSizeVw(0),
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 1],
                    min:0,
                    max:100,
                    axisLine:{
                        show:true,
                        symbol:['none', 'arrow'],
                        lineStyle:{
                            color:'#9dc5f1'
                        }
                    },
                    splitLine:{
                        show:false,
                        interval:5,
                        lineStyle:{
                            color:'rgb(14, 174, 246)'
                        }
                    },
                    axisLabel:{
                        fontWeight: 550,
                        fontFamily:'Microsoft YaHei',
                        color: '#fff',
                    }
                },
                yAxis: {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        color:'#9dc5f1',

                        fontFamily:'Microsoft YaHei',
                        fontWeight:800,
                    },
                    axisLine:{
                        show:true,
                        symbol:['none', 'arrow'],
                        lineStyle:{
                            color:'#9dc5f1'
                        }
                    },
                },
                series: [
                    {

                        type: 'bar',
                        data: [],
                        barWidth:firChatSizeVw(25) + 'vh',
                        // barGap:'40%',
                        barCategoryGap: '20%',
                        label: {
                            show: true,
                            position: 'right',
                            fontFamily:'Microsoft YaHei',
                            color:'#efba0c',
                            fontWeight:600,
                        },
                        itemStyle:{
                            color:{
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: 'rgb(10, 195, 239)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgb(12, 240, 51)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            },
                            borderRadius:[0,5,5,0],
                        }
                    }
                ]
            },
            barndQiId:''
        }
    },
    mounted() {
        //初始化门店数量
        this.$nextTick(()=>{
            mendianshuliangEcharts = echarts.init(document.querySelector('.quyucengji-line-base'));
            mendianshuliangEcharts.setOption(this.optionTiaoXing)
        })

        window.addEventListener('resize', () => {
            if(mendianshuliangEcharts){
                mendianshuliangEcharts.resize()
            }
        })
    },
    methods:{
        getMenDianNum(brandQi = ''){
            if(brandQi) this.barndQiId = brandQi
            instance.get('/base/dashboard/regionComparison',{
                params:{
                    periodId:this.barndQiId,
                    projectId:sessionStorage.getItem('projectId')
                }
            }).then(res => {
                if(res.data.code == 200){
                    if(res.data.data.length > 14){
                        this.optionTiaoXing.dataZoom = [
                            {
                                type: 'inside',
                                yAxisIndex: [0],
                                start:1,
                                end:40,
                            }
                        ]
                    }
                    this.optionTiaoXing.yAxis.data = []
                    this.optionTiaoXing.series[0].data = []
                    for(let val of res.data.data){
                        this.optionTiaoXing.yAxis.data.push(val.levelName)
                        this.optionTiaoXing.series[0].data.push(val.averageScore)
                    }
                    mendianshuliangEcharts.setOption(this.optionTiaoXing)
                }
                else{
                    this.optionTiaoXing.yAxis.data = []
                    this.optionTiaoXing.series[0].data = []
                    mendianshuliangEcharts.setOption(this.optionTiaoXing)
                    this.$message.error(res.data.msg || '门店数量获取失败')
                }

            })
        }
    }
}
</script>

<style scoped lang="scss">
.quyucengji-line-base{
  width: 100%;
  height: 100%;
}
</style>
